<template>
  <div class="inspection-sheet-root">
    <el-tooltip
      v-if="state.hasToTop"
      content="向前追溯"
      effect="dark"
      placement="top"
    >
      <div class="inspection-sheet-top" @click="toTop">
        <el-icon><Top /></el-icon>
      </div>
    </el-tooltip>
    <div class="inspection-sheet-title">
      {{ state.inspectionSheetData.check_gx_code }}
      <el-tag type="info">检验单</el-tag>
    </div>
    <div class="inspection-sheet-content-root">
      <div class="inspection-sheet-content">
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          检验数量:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.check_qty }}
          </span>
        </div>
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          合格数量:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.qualified_qty }}
          </span>
        </div>
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          合格数量:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.qualified_qty }}
          </span>
        </div>
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          不良数量:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.reject_qty }}
          </span>
        </div>
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          检验人员:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.check_user }}
          </span>
        </div>
        <div class="inspection-sheet-item" style="justify-content: flex-start">
          检验时间:
          <div style="width: 6px"></div>
          <span class="item-span">
            {{ state.inspectionSheetData.create_time }}
          </span>
        </div>
        <!-- <div
          class="inspection-sheet-item-root"
          style="justify-content: flex-start"
        >
          <div
            class="inspection-sheet-item"
            style="justify-content: flex-start"
          >
            物料批次:
            <div style="width: 6px"></div>
            <span class="item-span">
              {{ state.inspectionSheetData.invbatch }}
            </span>
          </div>
        </div>
        <div class="inspection-sheet-item-root">
          <div class="inspection-sheet-item" style="flex: 2">
            领用数量:
            <span class="item-span">{{ state.inspectionSheetData.qty }}</span>
          </div>
          <div class="line-space"></div>
          <div class="inspection-sheet-item" style="flex: 3">
            报工数量:
            <span class="item-span">
              {{ state.inspectionSheetData.report_qty }}
            </span>
          </div>
        </div>
        <div class="inspection-sheet-item-root">
          <div class="inspection-sheet-item" style="flex: 2">
            工序:
            <span class="item-span">
              {{ state.inspectionSheetData.op_name }}
            </span>
          </div>
          <div class="line-space"></div>
          <div class="inspection-sheet-item" style="flex: 3">
            库存数量:
            <span class="item-span">
              {{ state.inspectionSheetData.stock_qty }}
            </span>
          </div>
        </div>
        <div class="inspection-sheet-item-root">
          <div class="inspection-sheet-item" style="flex: 2">
            人员:
            <span class="item-span">
              {{ state.inspectionSheetData.re_user_name }}
            </span>
          </div>
          <div class="line-space"></div>
          <div class="inspection-sheet-item" style="flex: 3">
            时间:
            <span class="item-span">
              {{ state.inspectionSheetData.re_time }}
            </span>
          </div>
        </div> -->
      </div>
      <el-tooltip
        v-if="state.hasToRight"
        content="报检单追溯"
        effect="dark"
        placement="right"
      >
        <div class="inspection-sheet-right" @click="toRight">
          <el-icon><Right /></el-icon>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
<script setup>
  // {
  //   "baishi": "jianyan",
  //   "list": [
  //     {
  //       "reject_qty": 2,
  //       "create_time": "2023-02-27 09:58:23",
  //       "standard_type_name": "报废",
  //       "check_gx_code": "QMCG230227067",
  //       "unqualified_qty": 2,
  //       "check_qty": 2,
  //       "check_user": "王起文",
  //       "qualified_qty": 0,
  //       "create_user": "王起文",
  //       "pending_qty": 2,
  //       "check_time": "2023-02-27 09:58:23"
  //     }
  //   ]
  // }
  import { Top, Right } from '@element-plus/icons-vue'
  import { getJianyanZhuisua } from '@/api/mes/trace_back'
  import { parseMarks } from '../utils/parse'

  const getNode = inject('getNode')
  const state = reactive({
    node: null,
    inspectionSheetData: {},
    hasToTop: false,
    hasToRight: false,
    hasToBottom: false,
  })
  const toTop = async () => {
    //
  }
  const toRight = async () => {
    const res = await getJianyanZhuisua({
      checkGxCode: state.inspectionSheetData.check_gx_code,
    })
    const dataMap = (res && res.data && parseMarks(res.data)) || {}
    if (
      !dataMap ||
      !Object.keys(dataMap) ||
      Object.keys(dataMap).length === 0
    ) {
      state.hasToRight = false
      state.node.setData({ hasToRight: false })
      return
    }
    state.node &&
      state.node.data &&
      state.node.data.toRight(state.node, dataMap)
  }
  onMounted(() => {
    const node = getNode()
    state.node = node
    state.inspectionSheetData = node.data.inspectionSheetData
    state.hasToTop = node.data.hasToTop
    state.hasToBottom = node.data.hasToBottom
    state.hasToRight = node.data.hasToRight
    state.node.on('change:data', ({ current }) => {
      const { hasToTop, hasToRight } = current
      state.hasToTop = hasToTop
      state.hasToRight = hasToRight
    })
  })
</script>
<style lang="scss" scoped>
  .inspection-sheet-root {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 220px;
    background-color: #efc900;
    border: 2px solid #e0e0e0;
    border-radius: 5px;
    .inspection-sheet-top {
      padding: 2px 0;
      font-size: 18px;
      font-weight: bold;
      color: #fff;
      text-align: center;
      cursor: pointer;
      border-bottom: 2px solid #fff;
      &:hover {
        background-color: #efc900;
      }
    }
    .inspection-sheet-bottom {
      border-top: 2px solid #fff;
    }

    .inspection-sheet-right {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 100%;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      cursor: pointer;
      border-left: 2px solid #fff;
      &:hover {
        color: #ffffff;
        background-color: #efc900;
      }
    }
    .inspection-sheet-title {
      padding: 3px 0;
      font-size: 16px;
      font-weight: bold;
      line-height: 26px;
      color: #ffffff;
      text-align: center;
      border-bottom: 1px solid #fff;
    }
    .inspection-sheet-content-root {
      display: flex;
      flex: 1;
      flex-direction: row;
    }
    .inspection-sheet-content {
      display: flex;
      flex: 1;
      flex-direction: column;
      .inspection-sheet-item-root {
        display: flex;
        flex: 1;
        flex-direction: row;
      }
      .inspection-sheet-item {
        display: flex;
        flex: 1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 4px;
        .item-span {
          margin-left: 4px;
          font-weight: bold;
          color: #333;
        }
      }
      .line-space {
        width: 1px;
        height: 10px;
        margin: auto 0;
        background-color: #333;
      }
    }
  }
</style>
